<template>
    <div class="usercontent">
        <div class="usercontentheader">
            <div :class="{actived:step==1}" @click="step=1">提现申请</div>
            <div :class="{actived:step==2}" @click="step=2">提现账户设置</div>
            <div :class="{actived:step==3}" @click="step=3">提现记录</div>
            <div :class="{actived:step==4}" @click="step=4">实名认证</div>
        </div>
        <div class="twocolumns">
            <div v-show="step == 1">
                <div class="columnsline">
                    <div class="columnsleft">开户银行:</div>
                    <div class="columnsright">中国银行</div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft">开户支行:</div>
                    <div class="columnsright">湖北省武汉支行</div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft">开户姓名公司名:</div>
                    <div class="columnsright">李峰</div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft">银行卡号:</div>
                    <div class="columnsright">13123131311</div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft">提现金额:</div>
                    <div class="columnsright"><el-input v-model="input" placeholder="请输入提现金额"></el-input></div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft">短线验证码:</div>
                    <div class="columnsright">
                        <el-input v-model="phonecode" placeholder="请输入验证码"></el-input>
                        <button class="codebtn">发送验证码</button>
                    </div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft"></div>
                    <div class="columnsright">
                        <el-button type="primary" class="tixian">提现</el-button>
                        <p class="smallfont">单位元,最低100元</p>
                    </div>
                </div>
            </div>
            <div v-show="step == 2">
                <div class="columnsline">
                    <div class="columnsleft">开户银行:</div>
                    <div class="columnsright"><el-input v-model="input" placeholder="请输入开户银行"></el-input></div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft">开户支行:</div>
                    <div class="columnsright"><el-input v-model="input" placeholder="请输入开户支行"></el-input></div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft">开户姓名/公司名:</div>
                    <div class="columnsright"><el-input v-model="input" placeholder="请输入开户姓名/公司名"></el-input></div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft">银行卡号:</div>
                    <div class="columnsright"><el-input v-model="input" placeholder="请输入提现金额"></el-input></div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft">提现金额:</div>
                    <div class="columnsright"><el-input v-model="input" placeholder="请输入银行卡号"></el-input></div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft">短信验证码:</div>
                    <div class="columnsright">
                        <el-input v-model="phonecode" placeholder="请输入手机验证码"></el-input>
                        <button class="codebtn">发送验证码</button>
                    </div>
                </div>
                 <div class="columnsline">
                    <div class="columnsleft">图片验证码:</div>
                    <div class="columnsright">
                        <el-input v-model="phonecode" placeholder="请输入图片验证码"></el-input>
                        <img :src="$store.state.imgcodehost+'/getImgCode?imgToken=1234567'">
                    </div>
                </div>
                <div class="columnsline">
                    <div class="columnsleft"></div>
                    <div class="columnsright">
                        <el-button type="primary" >保存</el-button>
                        <p class="smallfont">单位元,最低100元</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    layout:'user',
    data() {
        return {
            step: 1,
            phonecode:'',
            input:'',
        }
    },

}
</script>

<style scoped>
.el-input{
    width: 206px;
}
.codebtn{
    width:120px;
    height:38px;
    border:1px solid rgba(136,136,136,1);
    border-radius:3px;
}
.tixian{
    width:168px;
    height:38px;
    margin: 10px 0;
}
.smallfont{
    font-size: 12px;
    color: #888;
}
</style>
